<template>

  <vxe-button type="text" status="primary" content="分配" @click="分配(tableData.data1)"></vxe-button>
  <vxe-modal v-model="分配_显示" width="900" show-zoom :lock-scroll='false'>
    <template #default>
      <p>
        <input v-model="新增的区" type="input" width="500" height="128" />
        <vxe-button content="新增区" status="primary" icon="vxe-icon--plus" @click="新增区"></vxe-button>
      </p>

      <vxe-table :data="分区显示数据" size="mini" ref="xTable" :edit-config="{trigger: 'click', mode: 'cell'}" :row-key="true">
        <!-- <vxe-table-column type="seq" width="60"></vxe-table-column> -->
        <vxe-table-column field="开关" title="分配">
          <template #default="{ row }">
            <vxe-checkbox v-model="row.开关" content=""></vxe-checkbox>
            {{row.开关}}
          </template>
        </vxe-table-column>
        <vxe-table-column field="区服" title="区服" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
        <vxe-table-column field="vip" title="vip" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
        <vxe-table-column field="元宝" title="元宝" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
        <vxe-table-column field="日常" title="日常" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
        <vxe-table-column field="age1" title="状态" :edit-render="{name: 'input', autoselect: true}"></vxe-table-column>
        <vxe-table-column field="age2" title="操作" width="200">
          <template #default="{ row }">
            <vxe-button size="mini" content="删除" status="danger" @click="$refs.xTable.remove(row)"></vxe-button>
            <vxe-button size="mini" content="上移" status="primary" @click="上移(row)"></vxe-button>
            <vxe-button size="mini" content="下移" status="primary" @click="下移(row)"></vxe-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-button @click="分配_保存" status="primary" content="保存修改"></vxe-button>
      <br />
    </template>
  </vxe-modal>

</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { VXETable, VxeTableInstance } from "vxe-table";
export default {
  data() {
    return {
      新增的区: "",
      分配_显示: false,
      分区显示数据: [],
    };
  },
  methods: {
    分配: function (要显示的数据) {
      console.log(要显示的数据);
      this.分配_显示 = true;
      this.分区显示数据 = JSON.parse(要显示的数据) || [];
    },

    分配_保存: function () {
      var 修改后区服 = JSON.stringify(
        this.$refs.xTable.getTableData().tableData
      );
      var 待上传 = JSON.stringify([
        { 账号: this.tableData.账号, field: "data1", value: 修改后区服 },
      ]);
      let T = this;
      console.log(待上传);
      this.$axios
        .post(T.$route.query.admin + "/账号修改", {
          data: 待上传,
        })
        .then(function (response) {
          console.log(response.data);
          T.tableData.data1 = 修改后区服;
          T.$XModal.alert({ content: "success 上传成功", status: "success" });
        })
        .catch(function (error) {
          alert("出错啦");
        });
    },
    新增区: function () {
      if (!this.新增的区) {
        alert("请输入新增区");
        return;
      }
      this.分区显示数据.push({
        区服: this.新增的区,
        开关: false,
        vip: 0,
        元宝: 0,
        日常: "",
        状态: "",
      });
      this.分区显示数据 = JSON.parse(JSON.stringify(this.分区显示数据));
      console.log(this.分区显示数据);
    },

    // async 新增区(row) {
    //   const $table = this.$refs.xTable;
    //   const record = {
    //     区服: "123",
    //     // date12: "2021-01-01",
    //   };
    //   const { row: newRow } = await $table.insertAt(record, row);
    //   await $table.setActiveCell(newRow, "sex");
    // },

    删除: function (row) {
      console.log(row);
    },
    上移: function () {},
    下移: function () {},
  },
  props: ["tableData"],
};
</script>


<style>
.vxe-button.type--button.theme--my-purple,
.vxe-button.type--button.theme--my-purple:hover {
  color: #fff;
}
.vxe-button.type--button.theme--my-purple {
  background-color: #006400;
}
.vxe-button.type--button.theme--my-purple:active {
  background-color: #a50aa5;
}
.my-green {
  color: #008000;
}
.my-primary {
  color: #3196ff;
}
.my-success {
  color: #67c23a;
}
.my-info {
  color: #909399;
}
.my-warning {
  color: #e6a23c;
}
.my-danger {
  color: #f56c6c;
}
</style>